<template>
    <div class='scroll_container' v-cloak>
        <div id="slider" class="mui-slider">
            <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <div class="mui-scroll">
                    <!-- MUI自己的是事件tap -->
                    <a :class="['mui-control-item', id == item.id ? 'mui-active' : '']" @click="updateId(item.id)" v-for='item in label' :key="item.id" >
                        {{ item.name }}
                    </a>
                    
                </div>
            </div>

        </div>
        <div class="mui-card" style="width: 320px;margin: 15px auto;" v-for='(item) in data' :key='item.course.id' >
			<div class="mui-card-header mui-card-media">
				<img :src="item.teacher.head_thumb">
				<div class="mui-media-body">
					{{ item.teacher.user_name }}
					<p>发表于 {{ item.course.add_time | dateFormat }}</p>
				</div>
			</div>
			<div class="mui-card-content">
				<img  v-lazy="item.course.image_src_show"  alt="" width="100%">
			</div>
			<div class="mui-card-footer">
				<a class="mui-card-link">Like</a>
				<a class="mui-card-link">Comment</a>
				<a class="mui-card-link">Read more</a>
			</div>
		</div>
        <vue-preview :slides="slide1" @close="handleClose" ref='preview' ></vue-preview>
    </div>

</template>

<script>
    import mui from '../../lib/mui/js/mui.min.js';
    // 
    export default {
        data() {
            return {
                id: 0,
                data: null,
                label: [],
                slide1: [
                    {
                        src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
                        msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
                        alt: 'picture1',
                        title: 'Image Caption 1',
                        w: 600,
                        h: 400
                    },
                    {
                        src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
                        msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
                        alt: 'picture2',
                        title: 'Image Caption 2',
                        w: 1200,
                        h: 900
                    }
                ]
            }
        },
        created() {
            this.getlist();
        },
        mounted() {
            // 页面Dom加载完.
            mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
            });
        },
       
        methods: {
            updateId(id) {
                console.log(id)
                this.id = id;
                if (id == 0) {
                    this.getlist();
                } else {
                    this.getClass();
                }

            },
            handleOpen(){
                console.log(123)
            },
            getlist() {
                this.axios
                .post("/api/recommend/Recommend/recommend", {
                    page: 1
                })
                .then(({ data }) => {
                    console.log(data);
                    this.data = data.course;
                    if(this.label.length == 0) {
                        data.label.unshift({
                            id: 0,
                            name: "推荐"
                        })
                        this.label = data.label;
                    }
                    
                });
            },
            getClass() {
                this.axios.post('/api/recommend/ClassifyCourse/classifyCourse', {
                    page: 1,
                    id: this.id
                }).then(({ data }) => {
                    this.data = data;
                })
            },
            handleClose () {
                console.log('close event')
            }
        }
    }
</script>

<style scoped>
    /* lazy-load需要全部导入mint-ui */
    img[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }
</style>